<template>
    <!--面包屑区域-->
 <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!--卡片区域-->
  <el-card>
    <el-row :gutter="20">
    <el-col :span="8">
        <el-input
        v-model="searchContent"
        :prefix-icon="Search"
      />
    </el-col>
    <el-col :span="2">
     <el-button type="danger" @click="search()">搜索</el-button>
    </el-col>
    <el-col :span="4">
     <el-button type="primary" style="margin-left: 20px" @click="showDialog()">添加用户</el-button>
    </el-col>
    </el-row>
    <!--表格区域-->
    <el-table :data="userData" border>
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="userName"></el-table-column>
        <el-table-column label="邮箱" prop="userMail"></el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              :icon="Edit"
              size="small"
           @click="showDialog1(scope.row.id)" >编辑</el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
           @click="deletes(scope.row.id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 4]"
      :small="true"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!--添加对话框-->
  <addUser></addUser>
  <!--编辑对话框-->
  <editUser></editUser>
    </template>

<script setup>
import { ArrowRight, Search, Edit, Delete } from '@element-plus/icons-vue'
import { onMounted } from "vue"
import { useUsersStore } from "../store/user"
import { storeToRefs } from "pinia"
import { ElMessage, ElMessageBox } from 'element-plus'
//引入addUser组件
import addUser from "../components/addUser.vue"
//引入editUser组件
import editUser from "../components/editUser.vue"
import axios from 'axios'

let store = useUsersStore()
let { userData, searchContent, currentPage, pageSize, total } = storeToRefs(store)
//条数改变
function handleSizeChange(news) {
    store.pageSize = news
    store.userloadData()
}
//页码改变
function handleCurrentChange(news) {
    store.currentPage = news
    store.userloadData()
}
//点击搜索
function search() {
    store.userloadData()
}
//点击添加用户
function showDialog() {
    store.addVisible = true
}
//点击编辑
function showDialog1(id) {
    store.editVisible = true
    store.userID = id
    store.userid()
}
//点击删除
function deletes(id) {
    ElMessageBox.confirm(
        '是否确定删除',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).catch((err) => err).then((res) => {
            if (res !== 'confirm') return ElMessage.info("已取消删除")
            axios.delete("/user/delete", { params: { id: id } }).then((res) => {
                store.userloadData()
                ElMessage.success("删除成功")
            })
        })

}
onMounted(() => {
    store.userloadData()
})
</script>

<style scoped>
.el-breadcrumb {
    font-size: 14px;
}

.el-card {
    margin-top: 20px;
}

.el-table {
    margin-top: 15px;
}
</style>